<style>
	.page{
		padding-bottom: 0;
		background: #ffffff;
	}
	.p28{
		padding: 28upx 0;
	}
	.m-content image{
		width: 100%;
		height: 100%;
	}
	
	
	.no-data{
		font-size: 28upx;
		text-align: center;
		width: 100%;
		padding: 20upx 0;
	}
	
	.furturn-cont{
		background: #FFFFFF;
		padding-top: 30upx;
		padding-bottom: 30upx;
	}
	.m-content-list-box{
		height: 115upx;
		background: #fff;
		width: 713upx;
		margin: 0 auto;
		border-radius: 15upx;
		position: relative;
		background: #ffffff;
		box-shadow:0px 6upx 10upx rgba(151,151,151,0.1);
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin-bottom: 15upx;
		border: 1px solid #eeeeee;
	}
	.m-content-list-box .arrow{
		position: absolute;
		right: 40upx;
		top: 50%;
		margin-top: -20upx;
	}
	.m-content-icon{
		width: 86upx;
		height: 86upx;
		overflow: hidden;
		border-radius: 50%;
		margin: 0 20upx;
	}
	.m-content-icon image{
		width: 100%;
		height: 100%;
	}
	.m-content-info .name{
		font-size: 34upx;
		color: #1d1d1d;
		padding-bottom: 5upx;
	}
	.m-content-info .id{
		font-size: 28upx;
		color: #353535;
	}
	.tenday-content{
		overflow: hidden;
		transition: all .3s;
		margin-bottom: 20upx;
	}
	.tenday-content .tenday-title{
		display: flex;
		align-items: center;
		padding-bottom: 20upx;
		height: 40upx;
	}
	.tenday-content .tenday-title text{
		color: #353535;
		font-size: 34upx;
	}
	.tenday-content .item{
		display: flex;
		align-items: center;
		height: 50upx;
		line-height: 50upx;
	}
	.tenday-content .item:nth-child(2n){
		background: #f7f7f7;
	}
	.tenday-content text{
		font-size: 32upx;
		text-align: center;
		color: #828080;
		width: 33.33%;
	}
	.tenday-content .item text{
		font-size: 28upx;
		color: #818181;
		flex: 1;
	}
	.tenday-content .loading-text{
		text-align: center;
		font-size: 32upx;
		padding: 10upx 0;
	}
</style>

<template>
	<view class="page">
		
		<view class="m-content">
			<view class="furturn-cont" v-if="makerList.length != 0">
				<view class="li" v-for="(item,index) in makerList" :key="index">
					<view class="m-content-list-box" :data-index="index" @tap="toggle">
						<view class="m-content-icon"><image :src="item.rec_info.head_pic_text"></image></view>
						<view class="m-content-info">
							<view class="name">{{item.rec_info.nickname||item.rec_info.realname}}</view>
							<view class="id">ID：{{item.rec_info.member_id}}</view>
						</view>
						<view class="arrow"><arrow color="#4a4a4a" size="40" :direction="cur == index?'top':'bottom'"></arrow></view>
					</view>
					<view class="tenday-content" v-if="cur == index">
						<view class="tenday-title">
							<text>年月</text>
							<text>津贴</text>
							<text>状态</text>
						</view>
						<view v-if="makerLogList.length != 0">
							<view class="item" v-for="(item,idx) in makerLogList" :key="idx">
								<text>{{item.send_time_text}}</text>
								<text>¥ {{item.money}}</text>
								<text>{{item.status_text}}</text>
							</view>
						</view>
						<view class="loading-text" v-else>加载中...</view>
					</view>
				</view>
			</view>
			
			<view class="no-data" v-else>暂无记录</view>
		</view>
		<view class="m-full-loading" v-if="showLoading">
		    <image src="../../../../static/images/loading.gif"></image>
		</view>
	</view>
</template>
<script>
	import henglang from '@/common/common_zb.js';
	export default {
		data() {
			return {
                showPopup: false,
				showLoading: false,
				makerList: [],
				makerLogList:[],
				cur:-1
			};
		},
        methods: {
			toggle(e) {
				let index = e.currentTarget.dataset.index
				if(this.cur == index){
					this.cur = -1
				}else{
					this.cur = index
				}
			}
        },
        onReady() {
			let that = this;
			that.showLoading = true;
			henglang.get('Maker/recommend',{},true,function(res){
				if(res.data.code == 0){
					that.makerList = res.data.data
					if(that.makerList.length != 0){
						henglang.get('Maker/recommend_log',{id:that.makerList[0].id},true,function(res){
							if(res.data.code == 0){
								that.makerLogList = res.data.data
							}
						});
					}
				}
			});
			that.showLoading = false;
        }
	}
</script>

